<template>
	<view class="barBg">
		<view :class="isActive?'bar-active':'bar'" :style="{'--borderCol':borderCol}">
			<!-- 颜色蒙层 -->
			<view class="mask" :style="{'--bgColor':bgColor}">
				<view class="checkBox" v-if="isActive">
					<u-icon name="checkbox-mark" color="#fff"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "bar-item",
		props: {
			isActive: {
				type: Boolean,
				default: false
			},
			bgColor: {
				type: String,
				default: '#000'
			},
			borderCol: {
				type: String,
				default: 'white'
			}
		},
		data() {
			return {

			};
		},
		created() {
			// init(300, 200);
		}
	}
</script>

<style lang="scss" scoped>
	// .bar {
	// 	width: 70rpx;
	// 	height: 400rpx;
	// 	border-radius: 50rpx;
	// 	background: var(--bgColor);
	// 	box-sizing: border-box;
	// 	border: 10rpx solid #414846;
	// }

	// .bar-active {
	// 	@extend .bar;
	// 	box-shadow: 0 0 20rpx 20rpx var(--borderCol), 0 0 4rpx 4rpx var(--borderCol), 0 0 6rpx 6rpx var(--borderCol), 0 0 8rpx 8rpx var(--borderCol);
	// 	// border: 10rpx solid transparent;
	// 	// border-image: linear-gradient(red, yellow) 10;
	// }

	.bar {
		// width: 70rpx;
		width: 10vw;
		// height: 400rpx;
		height: 30vh;
		border-radius: 50rpx;
		// background: var(--bgColor);
		background-image: url('../static/barBg.png');
		box-sizing: border-box;
		border: 5rpx solid #fff;
		transition: filter 0.3s ease-in-out;
		/* 添加过渡效果 */
		position: relative;
		
		.mask{
			// width: 70rpx;
			// height: 400rpx;
			border-radius: 50rpx;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: var(--bgColor);
			// opacity: 1;
			// backdrop-filter: blur(7rpx);
			// background-color: rgba(273, 22, 233, 0.5);
			.checkBox{
				border-radius: 50%;
				background-color: green;
				width: 20px;
				height: 20px;
			}
		}
	}
	

	.bar-active {
		@extend .bar;
		filter: drop-shadow(0 0 5rpx var(--borderCol)) drop-shadow(0 0 10rpx var(--borderCol)) drop-shadow(0 0 15rpx var(--borderCol)) drop-shadow(0 0 20rpx var(--borderCol));
		animation: glow 1.5s infinite;
		/* 添加发光动画 */
	}

	@keyframes glow {
		// 0%,
		// 100% {
		// 	filter: drop-shadow(0 0 105rpx var(--borderCol));
		// };
		
		// 50% {
		// 	filter: drop-shadow(0 0 200rpx var(--borderCol));
		// }

		0%,
		100% {
			filter: drop-shadow(0 0 5rpx var(--borderCol)) drop-shadow(0 0 10rpx var(--borderCol)) drop-shadow(0 0 15rpx var(--borderCol)) drop-shadow(0 0 20rpx var(--borderCol));
		}

		50% {
			filter: drop-shadow(0 0 10rpx var(--borderCol)) drop-shadow(0 0 20rpx var(--borderCol)) drop-shadow(0 0 30rpx var(--borderCol)) drop-shadow(0 0 40rpx var(--borderCol));
		}
		
		// 25% {
		// 	filter: drop-shadow(0 0 15rpx var(--borderCol)) drop-shadow(0 0 30rpx var(--borderCol)) drop-shadow(0 0 45rpx var(--borderCol)) drop-shadow(0 0 80rpx var(--borderCol));
		// }
	}
</style>